import React, { Component } from 'react';
import "./index.css"

const cardDataList = [
	{
		brandName: '弄堂里',
		brandLogo:
			'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*anNdQqA_I_AAAAAAAAAAAAAAARQnAQ',
		distanceDesc: '500m',
		campImage:
			'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*U29sSqgeU-4AAAAAAAAAAAAAARQnAQ',
		promoLogo: [
			'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*y6CTRo9L2oEAAAAAAAAAAAAAARQnAQ',
			'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*Q1d4SIoeKRkAAAAAAAAAAAAAARQnAQ',
		],
		voucherDesc: '弄堂里14元超值优惠券包x2',
		benefitAmount: '1',
		oriPriceAmount: '28',
		discountDesc: '0.6折',
		voucherStockNum: '库存888份',
	},
	{
		brandName: '弄堂里',
		brandLogo:
			'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*anNdQqA_I_AAAAAAAAAAAAAAARQnAQ',
		distanceDesc: '500m',
		campImage:
			'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*U29sSqgeU-4AAAAAAAAAAAAAARQnAQ',
		promoLogo: [
			'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*Q1d4SIoeKRkAAAAAAAAAAAAAARQnAQ',
		],
		voucherDesc: '弄堂里14元超值优惠券包x2',
		benefitAmount: '1',
		discountDesc: '0.6折',
	},
	{
		brandName: '飞猪',
		brandLogo:
			'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*dCL5Q4oBaQsAAAAAAAAAAAAAARQnAQ',
		campImage:
			'https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*MZ7VSaNZXRYAAAAAAAAAAAAAARQnAQ',
		promoLogo:
			['https://gw.alipayobjects.com/mdn/rms_7527d7/afts/img/A*90WEQLmnKdkAAAAAAAAAAAAAARQnAQ'],
		voucherDesc: '南方航空20元优惠券',
		benefitAmount: '20',
	},
];

let timer
class Gird extends Component {
	state = {
		startTime: 10,
		cunponVisible: false,   //是否抢购
	}

	componentDidMount(): void {
		timer = setInterval(() => {
			const { startTime } = this.state
			this.setState({ startTime: startTime - 1 }, () => {
				if (this.state.startTime === 0) {
					clearInterval(timer)
					timer = null
				}
			})
		}, 1000)
	}

	// 抢券
	getCoupon = () => {
		const { cunponVisible, startTime } = this.state
		if (startTime !== 0) {
			return
		}

		// 模拟异步请求
		new Promise((resolve, reject) => {
			setTimeout(() => {
				this.setState({ cunponVisible: true })
				resolve("成功")
			}, 1000)
		})
	}

	render() {
		const { startTime, cunponVisible } = this.state
		return (
			<>
				{
					cardDataList.map(item => {
						return <div className='quan' >
							<div className='left'>
								<div className='title'>
									<img src={item.brandLogo} alt="" />
									<span>{item.brandName}</span>
									<span>{item?.distanceDesc}</span>
								</div>
								<div className='content'>
									<img src={item.campImage} alt="" />
									<div className='quan-main'>
										{item.promoLogo.map(ele => {
											return <img src={ele} alt="" />
										})}
										<p>{item.voucherDesc}</p>
										<p>{item.benefitAmount + "元"}</p>
										{item?.oriPriceAmount && <del>{item?.oriPriceAmount + "元"}</del>}
									</div>
								</div>
							</div>
							<div className='right'>
								<p>{item?.discountDesc}</p>
								{cunponVisible ?
									<button className='over'>已抢购</button>
									:
									<button onClick={this.getCoupon}>{startTime === 0 ? "抢购" : startTime + " s"}</button>}
								<p>{item?.voucherStockNum}</p>
							</div>
						</div>
					})
				}
			</>
		);
	}
}

export default Gird;